<template>
  <u-popup ref="filterPop" :safeArea="false" @change="popChange" :show="show" class="search-pop-box">
    <view class="input-pop">
      <view class="header">
        <text>更多查询</text>
        <u-icon name="close" class="close-icon" @click="closePop" type="closeempty" size="20px" color="#CCCCCC" />
      </view>
      <view class="conent-wrap">
        <view class="main">
          <view class="items" v-if="showAlarm">
            <view class="label">告警类型</view>
            <uni-data-select v-model="filterInput.alarmType" :localdata="alramTypeDatas" placeholder="请选择告警类型"
              @change="changeAlarm"></uni-data-select>
          </view>
          <view class="items">
            <view class="label">企业类别</view>
            <uni-data-select v-model="filterInput.customerType" :localdata="customerDatas" placeholder="请选择企业类别"
              :class="{'isHigh':!showAlarm}" @change="changeCustomer"></uni-data-select>
          </view>
          <view class="items">
            <view class="label">企业名称</view>
            <view class="items-input clear-space-item">
              <uni-easyinput v-model="selectedText" placeholder="请选择企业名称" :disabled="true" :clearable="false"
                @click.native="chooseStatus">
              </uni-easyinput>
              <u-icon name="" class="name-close-icon uni-icons uniui-clear" type="closeempty" size="20px"
                color="#CCCCCC" v-if="!!selectedText" @click="clearInput" />
            </view>
          </view>
          <view class="items" v-if="showPurchase" style="position: relative;">
            <view class="label">采购企业</view>
            <!-- <uni-easyinput v-model="filterInput.purchaseName" placeholder="请输入采购企业" :clearable="false" :maxlength="50">
            </uni-easyinput>
            <u-icon name="" class="name-close-icon uni-icons uniui-clear" type="closeempty" size="20px" color="#CCCCCC"
              style="top: 60rpx;right: 20rpx;" v-if="!!filterInput.purchaseName" @click="clearInputP" /> -->
            <u--input v-model="filterInput.purchaseName" :maxlength="50" placeholder="请输入采购企业"></u--input>
          </view>
        </view>
        <view class="footer">
          <button class="cancel" @click="resetFilter()">重置</button>
          <button type="primary" @click="confirmFilter()">确认</button>
        </view>

        <scroll-view class="scroll-view" scroll-y="true" v-if="showPopup">
          <uni-easyinput prefixIcon="search" :maxlength="50" v-model="keyword" placeholder="请输入关键字"
            :adjust-position="false">
          </uni-easyinput>
          <view class="scroll-main" style="margin-top:20rpx;">
            <view :key="index" class="scroll-view-item" @click="statusClickItem(item)"
              :class="{ 'active-item': item.checked }" v-for="(item, index) in dataLists">
              <view>{{ item.text }}</view>
              <view class="checked-icon" v-if="item.checked">√</view>
            </view>
          </view>
          <view class="scroll-footer full-btn">
            <u-button class="cancel" plain size="mini" @click="cancleStatus">
              取消
            </u-button>
            <u-button size="mini" type="primary" @click="confirmStatus">
              确定
            </u-button>
          </view>
        </scroll-view>
      </view>
    </view>
  </u-popup>

</template>
<script>
  import { toast, timestampToChineseDate } from '@/utils/common';
  import { queryDictData, getPurDatas, getCoalDatas } from "@/api/statics.js";
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      showAlarm: {
        type: Boolean,
        default: false
      },
      showPurchase: {
        type: Boolean,
        default: false
      },
    },
    watch: {
      keyword(newVal) {
        // 这里能获取到完整的变化
        console.log("进入了watch...")
        this.search()
      },
    },
    computed: {
    },
    created() {
      this.getDictDatas()
      this.changeCustomer(100)
    },
    onShow() {
      this.showPopup = false
    },
    data() {
      return {
        showPopup: false,
        dataLists: [],
        companyInfos: [],
        selectedText: '',
        customerDatas: [],
        statusList: [],
        keyword: '',
        timeRange: [],
        alramTypeDatas: [],
        chooseStatusFlag: false,
        chooseComineFlag: false,
        filterInput: {
          companyId: undefined,
          customerType: '100',
          alarmType: undefined,
          purchaseName: undefined
        }
      };
    },
    methods: {
      // 清空输入框内容
      clearInput() {
        this.changeCustomer(this.filterInput.customerType)
      },
      clearInputP() {
        this.filterInput.purchaseName = undefined
        this.$set(this.filterInput, "purchaseName", undefined)
      },
      search() {
        this.dataLists = this.companyInfos.filter(e => e.text.includes(this.keyword))
      },
      async getDictDatas() {
        let that = this;
        let res = await queryDictData({ dictType: "customer_type" })
        if (res.code == 200) {
          res.data.forEach((e) => {
            if (e.dictValue != 4) {
              that.customerDatas.push({
                value: e.dictValue,
                text: e.dictLabel
              });
            }

          });
        }
        let resAlram = await queryDictData({ dictType: "ticket_alarm_type" })
        if (resAlram.code == 200) {
          resAlram.data.forEach((e) => {
            if (!["1", "8", "9"].includes(e.dictValue)) {
              that.alramTypeDatas.push({
                value: e.dictValue,
                text: e.dictLabel
              });
            }
          });
        }
      },
      timeChange(e) {
        const LIMIT = 100 * 24 * 3600 * 1000;
        // if (e[1] - e[0] > LIMIT) {
        //   toast('最大查询100天数据')
        //   return
        // }
        this.filterInput.beginTime = timestampToChineseDate(e[0])
        this.filterInput.endTime = timestampToChineseDate(e[1])
      },
      changeAlarm() {

      },
      changeCustomer(e) {
        this.selectedText = ''
        this.filterInput.companyId = undefined
        this.companyInfos = []
        this.dataLists = []
        if (!!e) {
          if (e == 100) {
            this.getCompaniesCoal(e);
          } else {
            this.getCompanies(e);
          }
        }
      },
      // 获取企业信息
      async getCompanies(e) {
        let that = this;
        let res = await getPurDatas(e);
        if (res.code == 200) {
          res.rows.forEach((e) => {
            that.companyInfos.push({
              value: e.id,
              text: e.customerName,
              checked: false
            });
          });
          this.dataLists = this.companyInfos
        }
      },
      // 获取企业信息-煤矿
      async getCompaniesCoal(e) {
        let res = await getCoalDatas(e);
        if (res.code == 200) {
          res.rows.forEach((e) => {
            this.companyInfos.push({
              value: e.enterpriseId,
              text: e.enterpriseName,
              checked: false
            });
          });
          this.dataLists = this.companyInfos
        }
      },
      popChange(data) {
        this.$emit('openChange', {
          key: 'isOpenFilterBox',
          show: data.show
        });
      },
      closePop() {
        this.showPopup = false
        this.$emit('closePop');
      },
      resetFilter() {
        this.$set(this.filterInput, "companyId", undefined)
        this.$set(this.filterInput, "customerType", "100")
        this.changeCustomer(100)
        this.$set(this.filterInput, "alarmType", undefined)
        this.$set(this.filterInput, "purchaseName", undefined)
        this.selectedText = ''
        this.companyInfos = []
      },
      cancleStatus() {
        this.showPopup = false
      },
      confirmStatus() {
        const filterList = this.companyInfos.filter(e => !!e.checked).map(m => m.value)
        this.filterInput.companyId = filterList[0]
        let textList = this.companyInfos.filter(e => !!e.checked).map(m => m.text)
        this.selectedText = textList.toString()
        this.showPopup = false;
      },
      chooseStatus() {
        if (this.companyInfos.length === 0) {
          toast('企业名称列表暂时为空');
          return;
        }
        this.dataLists = this.companyInfos
        this.keyword = ''
        this.showPopup = true;
      },
      statusClickItem(item) {
        this.companyInfos = this.companyInfos.map(e => {
          if (item.value === e.value) {
            e.checked = true
          } else {
            e.checked = false
          }
          return e
        })
        this.chooseStatusFlag = false;
      },
      confirmFilter() {
        this.$emit('filterChange', this.filterInput);
        this.$emit('closePop')
      },
      getNonEmptyProperties(obj) {
        return Object.entries(obj).reduce((acc, [key, value]) => {
          if (value !== null && value !== undefined && value !== '') {
            acc[key] = value;
          }
          return acc;
        }, {});
      }
    }
  };
</script>
<style lang="scss" scoped>
  .scroll-main {
    height: 460rpx !important;
  }

  .name-close-icon {
    position: absolute;
    right: 48rpx;
    width: 48rpx;
    height: 48rpx;
    color: rgb(192, 196, 204);
    font-size: 24px;
    font-family: uniicons;
    text-decoration: none;
    text-align: center;
    z-index: 1;
  }

  .name-close-icon:before {
    content: "\e66d";
  }

  .input-pop {
    border-radius: 10px 10px 0 0 !important;
    background-color: #ffffff;
    height: 763rpx;

    .conent-wrap {
      display: flex;
      flex-direction: column;
      position: relative;
      height: 684rpx;
    }

    .header {
      position: relative;
      padding: 21.33rpx 35.56rpx;
      text-align: center;
      border-bottom: 1.78rpx solid #eaeaea;

      .close-icon {
        position: absolute;
        right: 40rpx;
        top: 24rpx;
      }

      uni-text {
        font-size: 32rpx !important;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        color: #000000;
        width: 100%;
      }

      text {
        font-size: 26.67rpx;
        font-weight: bold;
      }
    }

    .main {
      padding: 35.56rpx 35.56rpx 0 35.56rpx;
      flex: 1;
      height: 0;
      overflow: hidden;
    }

    .footer {
      padding: 21.33rpx 35.56rpx 20rpx 35.56rpx;
      display: flex;
      justify-content: space-between;
    }

    button {
      margin-top: 17.78rpx;
      height: 71.11rpx !important;
      font-size: 28.44rpx !important;
      line-height: 71.11rpx !important;
      width: 49%;
    }

  }

  .scroll-view {
    position: absolute;
    padding: 17.78rpx 35.56rpx 0 35.56rpx;
    width: 100%;
    height: 100%;
    z-index: 9;
    top: 0;
    background-color: #fff;

    .scroll-view-item+.scroll-view-item {
      margin-top: 10.67rpx;
    }

    .search-box {
      margin: 0 0 23.11rpx 5.33rpx;
    }

    .scroll-view-item {
      display: flex;
      justify-content: space-between;
      padding: 14.22rpx 17.78rpx;
      border-radius: 7.11rpx;
      /* background-color: #f2f6fc; */

      .checked-icon {
        font-size: 24.89rpx;
        font-weight: bold;
      }
    }

    .scroll-main {
      height: 500rpx;
      overflow-y: auto;
    }

    .scroll-footer {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;

      button {
        margin: 0 !important;
      }
    }
  }

  .items {
    margin-bottom: 17.78rpx;

    .middle-icon {
      padding: 0 7.11rpx;
    }

    .label {
      margin-bottom: 7.11rpx;
      display: flex;
      align-items: center;
      font-size: 29rpx;
      font-weight: 400;
      color: #333;
      font-family: PingFang SC, PingFang SC-400;

      >text {
        color: red;
      }
    }

    .items-input {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: start;
    }

    input {
      flex: 1;
      height: 71.11rpx;
      color: #999;
      line-height: 71.11rpx;
      border-radius: 7.11rpx;
      padding: 0px 17.78rpx;
      border: 1.78rpx solid #e5e5e5;
    }

    .select-wrap {
      flex: 1;
      height: 71.11rpx;
      padding: 0 17.78rpx;
      color: #808080;
      line-height: 71.11rpx;
      border-radius: 7.11rpx;
      border: 1.78rpx solid #e5e5e5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .address-box {
      display: flex;
      flex: 1;

      button {
        width: 36%;
        margin-left: 17.78rpx;
      }
    }

    button {
      margin-top: 0 !important;
    }
  }
</style>